<template>
  <div>
    <!-- -->
    <search @getValue="getSonValue"></search>
    <div class="content" >
      <div class="newbox">
        <div class="">技术领域：</div>
        <div class="selectbox u-m-b-30">
          <div v-for="(item, index) in typelist" @click="changetype(index,item)" class="pointer"
            :class="current == index ? 'active' : 'selectboxitem'">
            {{ item }}
          </div>
        </div>
      </div>

      <div class="maincontent   ">

        <div class="contentitem pointer" @click="changeitem(item.id)" v-for="(item, index) in teacherlist"
          :class="itemcurrent == index ? 'active' : ''">
          <img  src="../../assets/首页/tecpeople.png" alt="">

          <div class="contentitem_text u-m-l-20" >
            <p class="name">{{item.name}}</p>
            <p class="level u-m-tb-20">{{item.post}}</p>
            <p class="level">{{item.enterprise}}</p>
            
          </div>
        </div>
        <div v-if="teacherlist==''" style="height: 400px;"  >
          <el-empty class="emptybox"  description="暂无数据~" />
        </div>
      </div>
      <div class="pagniation">
        <el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" 
           layout="prev, pager, next" :total="1000"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,getCurrentInstance } from 'vue'; 
import search from '../acl/search.vue';
import { useRouter } from 'vue-router';
import {getteacher} from '@/api/user/index'
const router = useRouter()
const typelist = ['全部', '现代农业', '粮食经济作物', '森林资源', '动物生产', '动物医学', '生态环境', '农机装备类', '食品产业技术', '化学与化学工程技术', '新一代信息技术', '生物医药', '新型材料']
const getSonValue = (e) => {
  console.log(e);//子组件传入的值
}
const { proxy } = getCurrentInstance() as any;;
const teacherlist:any = ref([])


const value = ref('')
const changetype = (index,item) => {
  current.value = index
  value.value = item
  getteacherlist()
}

const currentPage3 = ref(1)
const pageSize3 = ref(100)
function getteacherlist() {
  proxy.$get('/user/list/teacher', {
    current: currentPage3.value,
    limit: 6,
    field: value.value == '全部' ? '' : value.value,
  }).then((res: any) => {
    teacherlist.value = res.data.records
  })
}

getteacherlist()


const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  currentPage3.value = val
  getteacherlist()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage3.value = val
  getteacherlist()
}

const current = ref(0)
const itemcurrent = ref(0)
const changeitem = (index) => {
  itemcurrent.value = index
  router.push({
    path: '/product/peopledetail',
    query: {
      id: index
    }
  })
}

</script>
<style lang="scss" scoped>
.content {
  width: 1180px;
  margin: 50px auto;
  box-sizing: border-box;
  position: relative;

  .newbox {
    width: 1180px;
    display: flex;
    align-items: start;
    font-size: 14px;

    .selectbox {
      width: 1080px;

      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .selectboxitem {
        border-radius: 5px;
        padding: 8px 30px;
        border: 1px solid #999;
        margin: 0 20px 10px;
      }

      .active {
        margin: 0 20px 10px;
        border-radius: 5px;
        padding: 9px 30px;
        color: #fff;
        background-color: rgb(12, 160, 250);
      }
    }
  }


  .pagniation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
  }

  .maincontent {
    width: 1180px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    .contentitem {
      padding: 20px;
      margin: 20px 0;
      background: url('../../assets/首页/technology.png') ;
      width: 30%;
      background-size: 100% 100%;
      display: flex;
    }
    img{
      width: 100px;
      height: 130px
    }
    .active{
      box-shadow: 1px 1px 5px 1px $text-color;
    }
    .contentitem_text{
      font-size: 16px;
      .level{
        color: #999;
      }
    }
  }

}
</style>